<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import router from '../router';
	import {
		getByTypeService
	} from '@/api/notice'
	import {
		useRouter
	} from 'vue-router'
	import {
		useRoute
	} from 'vue-router'

	const route = useRoute()
	const type = ref(route.query.type)

	const noticeList = reactive([])

	const pageNum = ref(1)
	const total = ref(0)
	const pageSize = ref(10)

	async function getList() {
		noticeList.length = 0
		let result = await getByTypeService(type.value, pageNum.value, pageSize.value)
		// console.log(type)
		// console.log(result)
		// for (let i = 0; i < result.data.length; i++) {
		//     result.data[i].time = result.data[i].time.slice(0, 10)
		//     noticeList.push(result.data[i])
		// }
		total.value = result.data.total
		for (let i = 0; i < result.data.items.length; i++) {
			noticeList.push(result.data.items[i])
		}
	}
	getList()

	const onSizeChange = (size) => {
		pageSize.value = size
		getList()
	}
	const onCurrentChange = (num) => {
		pageNum.value = num
		getList()
	}

	const toHome = () => {
		router.push('/')
	}
	const toLogin = () => {
		router.push('/login')
	}
	const toAdRequest = () => {
		router.push('/adRequest')
	}

	const changeType = (num) => {
		type.value = num === 1 ? "公告" : "通知"
		getList()
	}

	const router2 = useRouter()
	const showNotice = (id) => {
		router2.push({
			path: '/notice',
			query: {
				'id': id,
				'type': type.value
			}
		})
	}
</script>


<template>
	<div>
		<div style="height: 90px;width: 70%;margin-left: 15%;">
			<img src="../../public/logo.png" style="width: 300px;height: 60px;margin-top: 15px;">
			<img src="../../public/jsnd.png" style="width: 300px;height: 50px;margin-top: 20px;float: right;">
		</div>
		<div style="background: rgb(19, 179, 232);height: 36px;">
			<div class="card" style="margin-left: 17%;" @click="toHome">首页</div>
			<div class="card" @click="toLogin">用户登录</div>
			<div class="card" @click="toAdRequest">商务合作</div>
		</div>
		<div style="height: 200px;background: rgb(245, 245, 245);">
			<img src="../../public/7.jpg" style="width: 70%;height: 200px;margin-left: 15%;">
		</div>


		<div style="width: 68%;margin-left: 16%;">
			<ul style="float: left;width: 200px;height: 100%;">
				<li class="li" style="background:rgb(19, 179, 232);color: aliceblue;border-top:none">平安资讯</li>
				<li class="li" @click=changeType(1)>公告要闻</li>
				<li class="li" @click=changeType(2)>重要通知</li>
			</ul>
			<div style="width: calc(100% - 300px);margin-left: 250px;">
				<div v-if="type === '公告'" class="tittle">公告要闻</div>
				<div v-if="type === '通知'" class="tittle">重要通知</div>
				<div style="border:1px solid #CCC;margin-top: 4px;margin-bottom: 18px;"></div>
				<div v-for="item in noticeList" style="margin: auto;height: 45px;">
					<el-link style="font-size: 17px;padding: 5px;" @click="showNotice(item.id)">{{
                item.tittle
            }}</el-link>
					<span style="font-size: 15px;float:right;color: grey;padding: 5px;">{{ item.time }}</span>
				</div>
			</div>
		</div>
		<div style="margin-left: calc(16% + 250px);margin-top: 20px">
			<el-pagination v-model:current-page="pageNum" v-model:page-size='pageSize' :page-sizes="[5, 10, 20]"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="onSizeChange"
				@current-change="onCurrentChange" />
		</div>
	</div>
</template>

<style>
	.card {
		height: 36px;
		/* width: 60px; */
		padding: 0px 20px;
		text-align: center;
		font-size: 16px;
		color: white;
		/* background: #000; */
		float: left;
		cursor: pointer;
		display: flex;
		align-items: center
	}

	.card:hover {
		background: rgb(0, 124, 165);
	}

	.li {
		/* height: 56px; */
		/* width: 100px; */
		font-size: 18px;
		padding: 20px 40px;
		/* background: black; */
		text-align: center;
		background-color: rgb(245, 245, 245);
		list-style-type: none;
		/* display: flex; */
		/* align-items: center; */
		line-height: 20px;
		border-top: 1px solid rgb(210, 210, 210);
		cursor: pointer;
	}

	.li:hover {
		background-color: rgb(220, 220, 220);
	}

	.tittle {
		width: 300px;
		color: #a13838;
		font-weight: bold;
		font-size: 21px;
		padding: 30px 0 10px 0;
	}

	a {
		text-decoration: none;
		color: black;
	}
</style>